<!doctype html>
<title>Navigating to a selector fragment anchor</title>
<script src="stash.js"></script>
<script>
function isInView(element) {
  let rect = element.getBoundingClientRect();
  return rect.top >= 0 && rect.top <= window.innerHeight
      && rect.left >= 0 && rect.left <= window.innerWidth;
}

function checkScroll() {
  let position = 'unknown';
  if (window.scrollY === 0)
    position = 'top';
  else if (isInView(document.getElementById('some-text')))
    position = 'some-text';
  else if (isInView(document.getElementById('cat')))
    position = 'cat';
  else if (isInView(document.getElementById('some-other-text')))
    position = 'some-other-text';
  else if (isInView(document.getElementById('input-button')))
    position = 'input-button';
  else if (isInView(document.getElementById('more-text-goes-here')))
    position = 'more-text-goes-here';

  let target = document.querySelector(":target");

  let results = {
    scrollPosition: position,
    href: window.location.href,
    target: target ? target.id : 'undefined'
  };

  let key = (new URL(document.location)).searchParams.get("key");
  stashResultsThenClose(key, results);
}

window.onload = function() {
  window.requestAnimationFrame(checkScroll)
}
</script>
<body>
  <div id='some-text' style='height:600px;'>some text</div>
  <svg id='cat' width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
    <circle class='path' cx='100' cy='100' r='100' fill='red'/>
  </svg>
  <div id='some-other-text' style='height:600px;'>some other text</div>
  <input id='input-button' type="button" value="Add to favorites">
  <div id='more-text-goes-here' style='height:600px;'>more text goes here</div>
</body>
